<route lang="json5">
{
	style: {
		navigationBarTitleText: '微信授权',
		navigationStyle: 'custom',
	},
}
</route>
<template>
	<view class="page bg-white">
		<text class="login-title">微信授权</text>

		<wd-form ref="form" custom-class="form" :model="model">
			<image
				:src="model.avatar || 'https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/default_head.png'"
				class="avatar"
				mode="scaleToFill"
			/>
			<wd-button type="text" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">获取头像</wd-button>

			<view class="lines">
				<text>昵称</text>
				<input type="nickname" placeholder="输入昵称" v-model="model.nickname" @change="handleNicknameChange" />
			</view>

			<view class="footer">
				<wd-button type="primary" size="large" custom-class="login-btn" @click="handleMpSubmit" block>
					微信授权
				</wd-button>
			</view>
		</wd-form>
	</view>
</template>
<script setup>
import { http } from '@/utils/http'
import { tabBar } from '@/pages.json'
import dayjs from 'dayjs'

const model = reactive({ nickname: '', avatar: '', openid: '' })

defineOptions({
	name: 'WxRegister',
})

const onChooseAvatar = async (e) => {
	console.log('%c [ e ]-44', 'font-size:13px; background:pink; color:#bf2c9f;', e.avatarUrl)
	// 拿到图片临时地址 上传到oss
	let avatarUrl = 'data:image/jpeg;base64,' + uni.getFileSystemManager().readFileSync(e.avatarUrl, 'base64')

	let res = await http.post('/Usersd/uploadUserBase64', {
		image_type: 1,
		base64_string: avatarUrl,
		file_name: `${dayjs().valueOf()}_${parseInt(Math.random() * 100)}.png`,
	})
	if (res.code == 200) {
		console.log('res', res)
		model.avatar = res.result.oss_url
	}
}

const handleNicknameChange = (e) => {
	console.log('e', e)
	model.nickname = e.detail.value
}

const handleMpSubmit = async () => {
	// 邀请码
	let inviteCode = uni.getStorageSync('inviteCode') || null

	if (model.avatar && model.nickname) {
		let res = await http({
			url: '/Usersd/wxMinReg',
			method: 'post',
			data: {
				openid: model.openid,
				nickname: model.nickname,
				avatar: model.avatar,
				referral_code: inviteCode,
			},
		})
		if (res.code == 200) {
			console.log('res', res)
			uni.showToast({
				title: '登录成功',
				duration: 2000,
				icon: 'none',
			})

			uni.setStorageSync('token', model.openid)
			await wxSubscribeMessage()
		}
	} else {
		uni.showToast({
			title: '请先获取头像昵称',
			duration: 2000,
			icon: 'none',
		})
	}
}

const wxSubscribeMessage = async () => {
	// 参与
	// #ifdef MP-WEIXIN

	// 判断是否需要评价
	wx.requestSubscribeMessage({
		tmplIds: ['fRb5n74G3uU6T_wOWhn9IVUkRZYPPdgwKok7Jnxo29Q'],
		success: async (res) => {
			console.log('res', res)
			let arr = []
			Object.keys(res).map((key) => {
				if (key != 'errMsg' && res[key] == 'accept') {
					arr.push(key)
					console.log(res[key])
					uni.showToast({
						title: '订阅成功',
						icon: 'none',
						mask: true,
					})
				}
			})

			let res1 = await http.post('/Usersd/setUserTaskWxID', {
				type: 1,
			})
			console.log('res', res1)

			setTimeout(() => {
				// back()
				uni.switchTab({ url: '/pages/index/index' })
			}, 2000)
		},
		fail: (err) => {
			console.log('err', err)

			setTimeout(() => {
				back()
			}, 2000)
		},
	})

	// #endif
}

const back = () => {
	let backRoute = uni.getStorageSync('backRoute')
	// 判断是否存在返回路由
	if (backRoute) {
		if (!tabBar) {
			uni.switchTab({
				url: '/pages/index/index',
			})
		}

		let isTab = false

		tabBar.list.map((e) => {
			if (backRoute.indexOf(e.pagePath) != -1) {
				isTab = true
			}
		})

		if (isTab) {
			uni.switchTab({
				url: backRoute,
			})
		} else {
			uni.redirectTo({
				url: backRoute,
			})
		}
	} else {
		uni.switchTab({
			url: '/pages/index/index',
		})
	}
}

onLoad((option) => {
	model.openid = option.openid
})
</script>
<style lang="scss" scoped>
:deep(.wd-cell-group) {
	background-color: transparent !important;
}

:deep(.wd-cell-group__body) {
	background-color: transparent !important;
}

:deep(.wd-input) {
	border-radius: 44rpx;
	// margin-bottom: 20rpx;
}

.page {
	background-image: url('http://cdn.gtfy.net.cn/swiper/newMyBg.png');
	background-size: cover;
}

.lines {
	width: 600rpx;
	height: 120rpx;
	line-height: 120rpx;

	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 24rpx;

	font-size: 28rpx;
	color: #333;

	input {
		border-bottom: 1rpx solid #eee;
	}
}

.login-title {
	width: 710rpx;
	line-height: 200rpx;
	text-align: left;
	font-size: 60rpx;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 0 10rpx #333;
}

.form {
	width: 710rpx;
	min-height: 600rpx;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;

	.input {
		width: 600rpx;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;

		border-radius: 50%;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.register {
		width: 100%;

		display: flex;
		justify-content: center;
		align-items: center;

		text-align: center;
	}
}

.footer {
	box-sizing: border-box;
	padding-top: 50rpx;

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: flex-start;

	flex: 1;

	width: 100%;
	height: 100rpx;

	.login-btn {
		width: 565rpx;
		background-image: url(http://cdn.gtfy.net.cn/swiper/newMyBg.png);
		background-color: transparent;
		background-size: cover;
		color: #5a88f1;
	}
}

:deep(.footer) {
	box-sizing: border-box;
	padding-top: 50rpx;

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: flex-start;

	flex: 1;

	width: 100%;
	height: 100rpx;

	.login-btn {
		width: 600rpx;
		background-image: url(http://cdn.gtfy.net.cn/swiper/newMyBg.png);
		background-color: transparent;
		background-size: cover;
		color: #5a88f1;
	}
}

:deep(.form) {
	width: 710rpx;
	min-height: 600rpx;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;

	.avatar {
		width: 150rpx;
		height: 150rpx;

		border-radius: 50%;
		box-sizing: border-box;

		margin-bottom: 20rpx;
	}

	.input {
		box-sizing: border-box;
		width: 600rpx;
		border-bottom: 1rpx solid #eee;
	}

	.register {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
}

.bottom-side-otherLogin {
	width: 100%;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;

	gap: 24rpx;
	/* #ifdef MP-WEIXIN */
	color: #4d80f0;
	/* #endif */

	/* #ifdef H5 */
	color: #fff;
	/* #endif */
	font-size: 24rpx;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}
</style>
